<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>实验室设备预约APP</title>
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/base.css"/>
    <link rel="stylesheet" type="text/css" href="css/common.css"/>
    <style>
    	.search-box input{
    		width:80%;
    	}
    	#search-btn{
    		width:20%;
    	}
    </style>
</head>
<body>
	<div class="container maxW640 bgw mauto h box-sizing-border borderw">
		<!--头部 start-->
		<header class="header displayf px jsca altc bgw">
			<a class="color0 h lh45 parl10" href="login.html"><i class="iconfont icon-xiangzuojiantou fz18"></i></a>
			<h1 class="title-name fz18">实验室设备预约APP</h1>
			<a class="color0 h lh45 parl10" href="javascript:void(0);"><i class="iconfont icon-tongzhi fz18"></i></a>
		</header>
		<!--头部 end-->
		<!--主体内容 start-->
		<section class="content mt50 mb50 ohidden" id="content">
			<div class="search-box border-yellow px maxW640 w">
				<input class="borderNone h30 t1_5" type="text" placeholder="输入关键字搜索..." v-model="keywords" /><a class="bg-yellow fr colorf lh30 tc fz15 h30" id="search-btn" href="javascript:void(0);" @click="search()">搜索</a>
			</div>
			<div class="content-box mt40">
				<ul>
					<li class="borderb-yellow patrbl5">
						<figure class="displayf">
							<a class="flex1" href="javascript:void(0);"><img class="w h" src="images/1.jpg" alt="1"/></a>
							<figcaption class="ml5 flex3">
								<p class="">名称：<span class="text-yellow">高频电磁</span></p>
								<p class="">规格：中，类型：华为</p>
								<p class="multi-lineEllipsis mb5"><a class="text-gray1" href="javascript:void(0);">这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介</a></p>
								<span class="btn">剩余量233</span>
								<span class="btn">已借出13</span>
							</figcaption>
						</figure>
					</li>
					<li class="borderb-yellow patrbl5">
						<figure class="displayf">
							<a class="flex1" href="javascript:void(0);"><img class="w h" src="images/2.jpg" alt="1" /></a>
							<figcaption class="flex3 ml5">
								<p class="">名称：<span class="text-yellow">高频电磁</span></p>
								<p class="">规格：中，类型：华为</p>
								<p class="multi-lineEllipsis mb5"><a class="text-gray1" href="javascript:void(0);">这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介</a></p>
								<span class="btn">剩余量233</span>
								<span class="btn">已借出13</span>
							</figcaption>
						</figure>
					</li>
					<li class="borderb-yellow patrbl5">
						<figure class="displayf">
							<a class="flex1" href="javascript:void(0);"><img class="w h" src="images/1.jpg" alt="1"/></a>
							<figcaption class="ml5 flex3">
								<p class="">名称：<span class="text-yellow">高频电磁</span></p>
								<p class="">规格：中，类型：华为</p>
								<p class="multi-lineEllipsis mb5"><a class="text-gray1" href="javascript:void(0);">这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介</a></p>
								<span class="btn">剩余量233</span>
								<span class="btn">已借出13</span>
							</figcaption>
						</figure>
					</li>
					<li class="borderb-yellow patrbl5">
						<figure class="displayf">
							<a class="flex1" href="javascript:void(0);"><img class="w h" src="images/2.jpg" alt="1" /></a>
							<figcaption class="flex3 ml5">
								<p class="">名称：<span class="text-yellow">高频电磁</span></p>
								<p class="">规格：中，类型：华为</p>
								<p class="multi-lineEllipsis mb5"><a class="text-gray1" href="javascript:void(0);">这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介这是一个测试设备的简介</a></p>
								<span class="btn">剩余量233</span>
								<span class="btn">已借出13</span>
							</figcaption>
						</figure>
					</li>
				</ul>
			</div>
			<div class="bg-yellow"><a class="displayb tc lh35 colorf" id="more-btn" href="javascript:void(0);">加载更多</a></div>
			<!--导航 start-->
			<nav class="nav px bgw">
				<ul class="displayf">
					<li class="flex1 h40 lh40"><a class="displayb tc" href="index.html"><i class="iconfont icon-icon active"></i></a></li>
					<li class="flex1 h40 lh40"><a class="displayb tc" href="javascript:void(0);"><i class="iconfont icon-icon1"></i></a></li>
					<li class="flex1 h40 lh40 pr"><a class="displayb tc" href="reservation.html"><i class="iconfont icon-yuyue1"></i></a></li>
					<li class="flex1 h40 lh40"><a class="displayb tc" href="person.html"><i class="iconfont icon-iconfont02"></i></a></li>
				</ul>
			</nav>
			<!--导航 end-->
		</section>
		<!--主体内容 end-->
	</div>
	<script type="text/javascript" src="js/extends/jquery.min.js"></script>
	<script type="text/javascript" src="js/extends/vue.js"></script>
	<script type="text/javascript" src="js/extends/layer_mobile/layer.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript">
    	let vm = new Vue({
    		data:{
    			//查询的关键词
    			keywords:"",
    			list:[],
    			name:"未之有"
    		},
    		methods:{
    			//设备列表查询
    			list(){
    				
    			},
    			//搜索
    			search(){

    			},
    			//加载更多
    			more(){
    				
    			}
    		}
    	}).$mount("#content");
    </script>
</body>
</html>